<template>
  <div>
    <router-link to="/">返回</router-link>
    <h2>
      <p>Join over</p>
      <p>{{ Math.round(output) }}+</p>
      <p>Developers</p>
    </h2>
    <h2 :style="{ color: color } "> COLOR CHANGING </h2>
  </div>
</template>

<script setup>
import {computed, ref} from '@vue/composition-api'
import {TransitionPresets, useTransition} from "@vueuse/core";

const source = ref(0);
const output = useTransition(source, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
});
source.value = 5000;

const colorSource = ref([0, 0, 0])
const colorOutput = useTransition(colorSource, {
  duration: 3000,
  transition: TransitionPresets.easeOutExpo,
});
const color = computed(() => {
  const [r, g, b] = colorOutput.value
  return `rgb(${r}, ${g}, ${b})`
})
colorSource.value = [0, 122, 204]
</script>
